<template>
  <div style="height: 1000px">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="90px">
      <el-form-item label="位置搜索">
        <el-input
          v-model="queryParams.address"
          placeholder="请输入位置"
          clearable
          @keyup.enter.native="searchLocations"
        />
      </el-form-item>
      <el-form-item label="车辆搜索">
        <el-autocomplete
          v-model="queryParams.vehicleNo"
          placeholder="请输入车牌号"
          :fetch-suggestions="querySearch"
          clearable
          @keyup.enter.native="searchLocations"
        />
      </el-form-item>
        <address-search @onSelected="onSelected"></address-search>
      <el-form-item>
        <el-button type="primary" @click="searchLocations">搜索</el-button>
      </el-form-item>
    </el-form>
    <all-location ref="allLocation" :allLocation="allLocation.trackPoints"></all-location>
  </div>
</template>

<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script>
import allLocation from "@/views/dingwei/Client/allLocation/index.vue";
import coordtransform from "coordtransform";
import {getAllClientNowLocation} from "../../../api/dingwei/Client";
import AddressSearch from '../allLocation/searchDriving';
export default {
  name: "index.vue",
  components: {allLocation,AddressSearch},
  data() {
    return {
      queryParams: {
        address: '',
        vehicleNo: '',
        driving: null,

      },
      allLocation: {
        trackPoints: [
          {
            clientId: undefined,
            lat: undefined,
            lng: undefined,
            time: undefined,
          }
        ],
      },
    }
  },
  mounted() {
    this.handleAllLocation()
  },
  methods: {
    onSelected(address) {
      this.queryParams.driving = address;
    },
    querySearch(queryString, cb) {
      console.log(this.allLocation.trackPoints)
      this.allLocation.trackPoints.forEach(item=>{
        item.value=item.vehicleNo
      })
      // 调用 callback 返回建议列表的数据
      cb(this.allLocation.trackPoints);
    },
    searchLocations() {
      let num = 0;
      for (let prop in this.queryParams) {
        if (this.queryParams.hasOwnProperty(prop)) {
          console.log(prop + ': ' + this.queryParams[prop]);
          if (this.queryParams[prop] != null && this.queryParams[prop] != '') {
            num++;
            if (num > 1) {
              this.$modal.msgWarning("请选择其一搜索")
            }
          }
        }
      }
      if (this.queryParams['address'] != null && this.queryParams['address'] != '') {
        this.$refs['allLocation'].searchAddressName(this.queryParams.address);
      }else if (this.queryParams['vehicleNo'] != null && this.queryParams['vehicleNo'] != '') {
        this.$refs['allLocation'].searchVehicleNum(this.queryParams.vehicleNo);
      } else {
        this.$refs['allLocation'].searchDriving(this.queryParams.driving);

      }
    },
    handleAllLocation() {
      let trackPoints = []
      getAllClientNowLocation().then(response => {
        response.data.forEach(item => {
          let trackPoint = coordtransform.wgs84togcj02(item.lng, item.lat);
          trackPoints.push({
            clientId: item.clientId,
            lng: trackPoint[0],
            lat: trackPoint[1],
            time: item.timestamp,
            vehicleNo: item.vehicleNo
          })
        })
        this.allLocation.trackPoints = trackPoints;
        this.$refs['allLocation'].init(trackPoints);
      });
    }
  }
};
</script>

<style scoped>

</style>
